<template>
    <van-tabbar route v-model="active"  active-color="rgba(228, 152, 41, 1)" inactive-color="rgba(142, 142, 147, 1)">
        <van-tabbar-item :icon="img1"  :style="{'color':color}"  to="/centerzh">首页</van-tabbar-item>
        <van-tabbar-item :icon="img2" to="/report">报告</van-tabbar-item>
        <van-tabbar-item :icon="img3" to="/meeting">会议</van-tabbar-item>
        <van-tabbar-item :icon="img4" to="/person">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script>
import img1 from "./1.png";
import img2 from "./2.png";
import img3 from "./3.png";
import img4 from "./4.png";
import img1on from "./1-on.png";
import img2on from "./2-on.png";
import img3on from "./3-on.png";
import img4on from "./4-on.png";
export default {
    data() {
        return {
            active: this.$route.meta.active,
            color: ""
        };
    },
    computed: {
        img1() {
            if (this.active == 0) {
                this.color =' rgba(228, 152, 41, 1)';
                return img1on;
            } else {
                this.color =' rgba(142, 142, 147, 1)';
                return img1;
            }
        },
        img2() {
            if (this.active == 1) {
                return img2on;
            } else {
                return img2;
            }
        },
        img3() {
            if (this.active == 2) {
                return img3on;
            } else {
                return img3;
            }
        },
        img4() {
            if (this.active == 3) {
                return img4on;
            } else {
                return img4;
            }
        }
    },
    watch: {
        //防止后退是icon不更新激活状态
        "$route.meta": function(newVal, oldVal) {
            this.active = newVal.active;
        }
    }
};
</script>
 
